<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f2efed;
            line-height: 1;
        }
        /*搜索按钮*/

        .search_box {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0.45rem 0.75rem;
            background-color: #fff;
            padding: 0.4rem 0;
            border-radius: 0.1rem;
        }

        .search_box img {
            width: 0.625rem;
            margin-right: 0.25rem;
        }

        .search_box span {
            font-size: 0.7rem;
            color: #999;
        }
        /*联系人列表*/
        /*弹出的字母框*/

        #letter {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            font-size: 2.5rem;
            color: #fff;
            text-align: center;
            line-height: 3rem;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            left: 50%;
            top: 50%;
            margin: -50px 0 0 -50px;
            z-index: 99;
            display: none
        }

        #letter img {
            width: 2.5rem;
            height: 2.5rem;
            float: left;
            margin: 1.25rem 0 0 1.25rem;
        }
        /*列表*/

        .sort_box {
            margin: 0;
        }

        .sort_list {
            padding: 0.45rem 0;
            background-color: #fff;
            position: relative;
        }

        .sort_list::after {
            content: "";
            height: 1px;
            width: calc(100% - 0.75rem);
            position: absolute;
            background: #edeae8;
            bottom: 0;
            left: 0.75rem;
        }

        .sort_list .num_logo {
            width: 1.5rem;
            margin: 0rem 0.75rem;
        }

        .sort_list .num_name {
            font-size: 0.8rem;
            color: #333;
        }

        .sort_letter {
            padding: 0.5rem 0rem;
            margin-left: 0.75rem;
            font-size: 0.7rem;
            color: #666666;
        }
        /*字母列表*/

        .initials {
            position: fixed;
            top: 47px;
            right: 0;
            height: 100%;
            width: 15px;
            padding-right: 10px;
            text-align: center;
            font-size: 12px;
            z-index: 99;
            background: transparent!important;
        }

        .indexes_list {
            position: absolute;
            top: 50%;
            right: 0.45rem;
            transform: translateY(-50%);
        }

        .indexes_list li {
            list-style: none;
            height: 0.6rem!important;
            font-size: 0.5rem;
            color: #999999;
        }
        /*多选框*/

        label {
            width: 100vw;
            display: flex;
            align-items: center;
        }

        .check_btn {
            margin-left: 0.75rem;
            width: 0.75rem;
            height: 0.75rem;
        }

        .check_btn:checked {
            background-color: #f23030;
            border: 1px solid #f23030;
        }

        .check_btn:checked::after,
        .check_btn:checked::before {
            width: 0.4rem;
            height: 0.2rem;
            margin-left: -0.25rem;
            margin-top: -0.15rem;
        }
    </style>
</head>

<body>
    <div class="app">

        <div class="mail_list">
            <div class="search_box">
                <img src="../../image/four/search.png" alt="">
                <span>搜索</span>
            </div>
        </div>


        <!-- 联系人列表 -->
        <div id="letter"></div>
        <div class="sort_box">
            <div v-for="(friend_info,index) in data" class="sort_list">
                <label @click="add_member_id(friend_info.user_id,index,$event)">
                  <input class="aui-radio check_btn" type="checkbox" name="checkbox">
                  <div class="num_logo">
                    <!-- <img v-if="friend_info.head_img" :src="friend_info.head_img" alt=""> -->
                    <!-- <img v-else src="../../image/four/ql.png" alt=""> -->
                    <div :style="'background:url('+friend_info.head_img+') center/cover no-repeat;width:1.5rem;height:1.5rem;'"></div>
                  </div>
                  <div v-if="friend_info.username" class="num_name">{{friend_info.username}}</div>
                  <div v-else class="num_name">该用户很懒，没有填写名字</div>
                </label>
            </div>
        </div>
        <div class="initials">
            <ul class="indexes_list">

            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/jquery.charfirst.pinyin.js"></script>
<script type="text/javascript" src="../../script/sort.js"></script>
<script type="text/javascript">
    var app;
    var rong;
    apiready = function() {
        if (api.pageParam.title == "建立群聊" || api.pageParam.type == "添加") {
            app = new Vue({
                el: '.app',
                data: {
                    token: '',
                    groupchat_id: '',
                    data: [],
                    member_id: [],
                    str_id: '-'
                },
                mounted: function() {
                    var $_this = this;
                    $_this.token = $api.getStorage('token');
                    api.ajax({
                        url: window.Url.Community_friendList,
                        method: 'post',
                        data: {
                            values: {
                                token: $_this.token,
                                groupchat_id: $_this.groupchat_id
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            if (ret.re == 1) {
                                for (var i = 0; i < ret.data.list.length; i++) {
                                    $_this.data = $_this.data.concat(ret.data.list[i].userlist);
                                    $_this.data[i].isCheck = false;
                                }
                                // console.log('整合后的好友列表数据---' + JSON.stringify($_this.data))
                                $_this.$nextTick(function() {
                                    list_paixu();
                                })
                            }
                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })
                },
                methods: {
                    // 点击后将id存入数组
                    add_member_id: function(friend_id, index, ev) {
                        if (ev.target.tagName == 'LABEL' || ev.target.tagName == 'DIV') return;
                        var l = $('.sort_box').find('input:checked').length;
                        api.execScript({
                            script: 'chose_num(' + l + ');'
                        });
                        var $_this = this;
                        if (!$_this.data[index].isCheck) {
                            $_this.member_id.push(friend_id);
                            $_this.data[index].isCheck = !$_this.data[index].isCheck;
                            // $_this.str_id = $_this.str_id + friend_id +"-";
                        } else {
                            $_this.member_id.pop();
                            $_this.data[index].isCheck = !$_this.data[index].isCheck;
                        }
                        // console.log("添加的成员id---" + JSON.stringify($_this.member_id))
                    }
                }
            })

        } else if (api.pageParam.type == "移除") {

             app = new Vue({
                el: ".app",
                data: {
                    token: '',
                    groupchat_id: '',
                    data: [],
                    member_id: [],
                    str_id: '-'
                },
                mounted: function() {
                    var $_this = this;
                    //请求群详情列表接口
                    api.ajax({
                        url: window.Url.Community_groupchatDetails,
                        method: 'post',
                        data: {
                            values: {
                                token:$api.getStorage('user_data').token,
                                groupchat_id:api.pageParam.group_chat_id,
                                keywords:""
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            // console.log("移除群成员时获取到的群成员数据-----"+JSON.stringify(ret));
                            if(ret.re==1){
                              $_this.data = ret.data.list;
                            }
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });

                },
                methods:{
                  // 点击后将id存入数组
                  add_member_id: function(friend_id, index, ev) {
                      if (ev.target.tagName == 'LABEL' || ev.target.tagName == 'DIV') return;
                      var l = $('.sort_box').find('input:checked').length;
                      api.execScript({
                          script: 'chose_num(' + l + ');'
                      });
                      var $_this = this;
                      if (!$_this.data[index].isCheck) {
                          $_this.member_id.push(friend_id);
                          $_this.data[index].isCheck = !$_this.data[index].isCheck;
                          // $_this.str_id = $_this.str_id + friend_id +"-";
                      } else {
                          $_this.member_id.pop();
                          $_this.data[index].isCheck = !$_this.data[index].isCheck;
                      }
                      // console.log("添加的成员id---" + JSON.stringify($_this.member_id))
                  }
                }
            })

        }



        // 初始化融云
        rong = api.require('rongCloud2');
        rong.init(function(ret, err) {
            if (ret.status == 'success') {
                console.log('初始化融云成功了')
            } else {
                api.toast({
                    msg: err.code
                });
            }
        });
        // 连接融云
        rong.connect({
            token: $api.getStorage('rong-token')
        }, function(ret, err) {
            if (ret.status == 'success') {
                console.log('融云连接成功——————————' + JSON.stringify(ret));
            } else {
                alert(err.code)
            }
        });


    };


    function build_group() {
        var friend_ids = app.member_id.join("-");

        if (api.pageParam.title == "建立群聊") {
            // 建立群聊的接口
            api.ajax({
                url: window.Url.Community_addGroupchat,
                method: 'post',
                data: {
                    values: {
                        token: $api.getStorage('user_data').token,
                        user_ids: "-" + friend_ids + "-"
                    }
                }
            }, function(ret, err) {
                if (ret) {
                    // alert(JSON.stringify(ret));
                    if (ret.re == 1) {
                        api.toast({
                            msg: '创建成功',
                            duration: 2000,
                            location: 'bottom'
                        });
                    } else {
                        api.toast({
                            msg: ret.info,
                            duration: 2000,
                            location: 'bottom'
                        });
                    }

                } else {
                    alert(JSON.stringify(err));
                }
            });
        } else if (api.pageParam.type == "添加") {
            // alert(api.pageParam.group_chat_id)
                // 添加群成员
            api.ajax({
                url: window.Url.Community_setGroupchatUser,
                method: 'post',
                data: {
                    values: {
                        token: $api.getStorage('user_data').token,
                        user_ids: "-" + friend_ids + "-",
                        groupchat_id: api.pageParam.group_chat_id,
                        type: 1
                    }
                }
            }, function(ret, err) {
                if (ret) {
                    // alert(JSON.stringify(ret));
                    if (ret.re == 1) {
                        api.toast({
                            msg: '添加成员成功',
                            duration: 2000,
                            location: 'bottom'
                        });
                    } else {
                        api.toast({
                            msg: ret.info,
                            duration: 2000,
                            location: 'bottom'
                        });
                    }

                } else {
                    alert(JSON.stringify(err));
                }
            });
        } else if (api.pageParam.type == "移除") {
            // alert(api.pageParam.group_chat_id)
                // 添加群成员
            api.ajax({
                url: window.Url.Community_setGroupchatUser,
                method: 'post',
                data: {
                    values: {
                        token: $api.getStorage('user_data').token,
                        user_ids: "-" + friend_ids + "-",
                        groupchat_id: api.pageParam.group_chat_id,
                        type: 2
                    }
                }
            }, function(ret, err) {
                if (ret) {
                    // alert(JSON.stringify(ret));
                    if (ret.re == 1) {
                        api.toast({
                            msg: '删除成员成功',
                            duration: 2000,
                            location: 'bottom'
                        });
                    } else {
                        api.toast({
                            msg: ret.info,
                            duration: 2000,
                            location: 'bottom'
                        });
                    }

                } else {
                    alert(JSON.stringify(err));
                }
            });
        }


        // 关闭当前窗口
        setTimeout(function(){
          api.closeWin({});
        },2000);
        api.execScript({
            name: 'four_one_header',
            frameName: 'chat_group_detail',
            script: 'window.location.reload();'
        });
    }
</script>

</html>
